<template>
  <div class="table-wrap">
    <div class="table-head-wrap">
      <table class="alarm-table">
        <thead>
          <tr :style="computedHeaderStyle">
            <th>告警级别</th>
            <th>告警时间</th>
            <th>告警内容</th>
            <th>被监测设备</th>
            <th>终端设备</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="table-body-wrap">
      <table class="alarm-table">
        <tbody>
          <tr
            v-for="(item, index) in tableData"
            :key="item.id"
            :style="[computedBodyStyle, bodyTableBg(index)]"
          >
            <td>
              {{ getDictLabel(DICT_TYPE.ALARM_LEVEL, item.alarmLevel) }}
            </td>
            <td>{{ formatDate(item.alarmTime) }}</td>
            <td>{{ item.alarmContent }}</td>
            <td>{{ item.monitorDeviceName }}</td>
            <td>{{ item.terminalDeviceNames }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import type { CSSProperties } from 'vue'
import { DICT_TYPE, getDictLabel } from '@/utils/dict'
import { AlarmRecordApi } from '@/api/vmiot/alarmrecord'
import { formatDate } from '@/utils/formatTime'
const router = useRouter()
// Props
const props = defineProps<{
  widgetOptions: any
  isPreview?: Boolean
  tenantId: number
}>()

const emit = defineEmits([])

const setupOption = computed(() => {
  return props.widgetOptions.setup
})

const tableData = ref<any[]>([])

// 计算样式
const computedHeaderStyle = computed<CSSProperties>(() => ({
  color: setupOption.value.hFontColor,
  fontWeight: setupOption.value.hFontWeight,
  fontSize: `${setupOption.value.hFontSize}px`,
  letterSpacing: `${setupOption.value.hLetterSpacing}em`,
  backgroundColor: setupOption.value.hBackgroundColor,
  textAlign: setupOption.value.hTextAlign,
  lineHeight: `${setupOption.value.rowHeight}px`
}))

const computedBodyStyle = computed<CSSProperties>(() => ({
  color: setupOption.value.bFontColor,
  fontWeight: setupOption.value.bFontWeight,
  fontSize: `${setupOption.value.bFontSize}px`,
  letterSpacing: `${setupOption.value.bLetterSpacing}em`,
  textAlign: setupOption.value.bTextAlign
  // lineHeight: `${setupOption.value.rowHeight}px`
}))

const bodyTableBg = (index) => {
  let styleJson = {}
  if (index % 2) {
    styleJson['background-color'] = setupOption.value.bEvenBackgroundColor
  } else {
    styleJson['background-color'] = setupOption.value.bOddBackgroundColor
  }
  return styleJson
}

const getAlarmData = async () => {
  const res = await AlarmRecordApi.getAlarmRecordList4Tenant(props.tenantId)
  tableData.value = res
}

onMounted(() => {
  if (props.isPreview) {
    getAlarmData()
  } else {
    tableData.value = props.widgetOptions.data.alarmData
  }
})
</script>

<style scoped lang="scss">
.table-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .alarm-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    table-layout: fixed; // 保持列宽一致
    th,
    td {
      padding: 0 5px;
    }
  }

  .table-head-wrap {
    overflow: hidden;
  }

  .table-body-wrap {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
